                               

import React, { Component } from "react";
import styles from './project.css'
import { Avatar, Image, Typography, Rate, Tag, Tabs, Space, Radio, Divider  } from 'antd';
import { WindowsOutlined, DingdingOutlined, QqOutlined, AppleOutlined, TrophyOutlined, HighlightOutlined, ScissorOutlined,
  ZhihuOutlined, LikeOutlined, ClockCircleOutlined, FormOutlined, BankOutlined, SlackOutlined, BulbOutlined,
  BranchesOutlined, ChromeOutlined, StarOutlined, MessageOutlined } from '@ant-design/icons';
import Breadcrumbs from "../../components/component/Breadcrumb/breadcrumb";

const { Title, Paragraph, Text, Link } = Typography;

  const projects =[
    {
      name:'西安市丝路欢乐世界建设情况',
      tag:'丝路文旅',
      tag2:'丝路中心',
      tag3:'丝路中建项目',
      starts:3,
      description:'丝路欢乐世界作为西安市丝绸之路风情城的核心项目，通过建造中国神奇中华街区、印度恒河象谷街区、中亚沙海秘境街区、中东瑰丽波斯街区、俄罗斯极光雪国街区、希腊众神之战街区、意大利荣耀罗马街区七个主题文化街区',
      time:'2021-02-25 14:25:36',
      src:'https://img0.baidu.com/it/u=987750893,2760856011&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
      link:'https://baijiahao.baidu.com/s?id=1744546627376732044&wfr=spider&for=pc',
      linkTitle:'好耍！西安迎来潮玩娱乐新地标',
      start:'15',
      praise:'21',
      comment:'20',
    },
    {
      name:'欢乐谷玛雅海滩运营',
      tag:'丝路文旅',
      tag2:'海滩娱乐',
      tag3:'丝路中心项目',
      starts:5,
      description:'西安欢乐谷是华侨城欢乐谷家族中总投资和单位投资一次性投入最高的主题公园。公园以“欢乐谷”、“欢乐谷·玛雅海滩”、“欢乐谷·HAPPY WALK”、“欢乐谷·KIDS”、“OCT1314摩天轮”等多个业态主题强势联动，为游人打造多维度娱乐体验新场景。',
      time:'2022-01-17 18:33:51',
      src:'https://img0.baidu.com/it/u=960343523,105411910&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      link:'https://www.163.com/dy/article/H8C01DBP0514RRD8.html',
      linkTitle:'西安欢乐谷·玛雅海滩即将欢乐回归',
      start:'24',
      praise:'19',
      comment:'16',
    },    
    {
      name:'第四座太古里“西安+太古”商业文化综合体',
      tag:'太古里',
      tag2:'商业文化综合体',
      starts:4,
      description:'西安太古里是继北京三里屯太古里、成都远洋太古里和上海前滩太古里取得成功后，太古地产为西安小雁塔历史文化片区量身定制的第四座“太古里”,相信落成后将改变该区域乃至西安商业发展。',
      time:'2022-11-14 18:31:05',
      src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14592527829%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672909484&t=c34e320da1bfc154868087dcb53b1f68',
      link:'http://news.hsw.cn/system/2022/1123/1551646.shtml',
      linkTitle:'航拍西安小雁塔太古里项目最新进展',
      start:'12',
      praise:'18',
      comment:'22'
    },           
  ]
  const culture =[

    {
      name:'西安奥林匹克体育中心',
      tag:'跳水游泳中心',
      tag2:'综合性体育馆',
      tag3:'十四届全运会',
      starts:4,
      description:'西安奥林匹克体育中心是国内首个5G全覆盖场馆， [8]  是第十四届全运会的主场馆，于2017年10月9日开工建设。2020年5月30日，西安奥体中心体育馆正式通过竣工验收。 [1]  2020年11月20日，西安奥林匹克体育中心正式投入使用。',
      time:'2022-09-28 17:03:01',
      src:'https://img0.baidu.com/it/u=2277072976,2524354142&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=450',
      link:'https://xian.qinfeng.gov.cn/info/1253/18799.htm',
      linkTitle:'西安奥体中心',
      start:'12',
      praise:'18',
      comment:'19',
    },    
    {
      name:'西安国际足球中心',
      tag:'亚足联',
      tag2:'亚洲杯馆主场馆',
      tag3:'国际足球中心',
      starts:5,
      description:'西安国际足球中心是2023年亚足联中国亚洲杯馆主场馆之一。经西安市政府决定，按照国际A级体育场馆建设标准，在西咸新区沣东新城规划建设西安国际足球中心，这座能容纳60000人，并符合亚足联标准的现代化专业足球场，于2023年亚洲杯举办前建成投用',
      time:'2022-12-01 05:15:32',
      src:'https://img0.baidu.com/it/u=1452774323,4292455745&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
      link:'https://sports.sohu.com/a/613785000_121123923',
      linkTitle:'提速“世界足球城市”建设',
      start:'26',
      praise:'17',
      comment:'39'
    },           
  ]
  const business =[
    {
      name:'大茂城高新商圈',
      tag:'大茂城',
      tag2:'轰趴馆',
      tag3:'高新商圈',
      starts:4,
      description:'大茂城定位24h不打烊娱乐楼，重新定义高新夜经济。购物中心分为地下四层，地上六层，涵盖27m挑空Live House、轰趴馆、KTV、花园餐厅、美食市集等特色业态。项目高透全落地玻璃幕墙看起来也极具现代感。',
      time:'2021-09-21 15:21:37',
      src:'https://img2.baidu.com/it/u=837751077,119407049&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=669',
      link:'https://baijiahao.baidu.com/s?id=1726165873875888785&wfr=spider&for=pc',
      linkTitle:'大茂城高新商圈',
      start:'15',
      praise:'23',
      comment:'20',
    },
    {
      name:'南飞鸿乐荟中心',
      tag:'南飞鸿中心',
      tag2:'自然天地山水',
      tag3:'城市绿洲',
      starts:3,
      description:'乐荟中心由全球顶尖建筑事务所Aedas凯达环球操刀设计，项目以“自然天地山水”为主题，在综合体的设计中，将自然融入城市结构，在露台引入分层的垂直绿色体验，形象地呈现出“城市绿洲”的概念。该项目共计11层，其中B1-7F为商业楼层，B4-B2为规划3000个车位的停车场。南飞鸿乐荟中心的出现也将会是西安首个“生态主题式商业体验中心”。',
      time:'2022-11-18 08:35:51',
      src:'https://img1.baidu.com/it/u=2694769702,472730435&fm=253&fmt=auto&app=138&f=JPEG?w=716&h=500',
      link:'https://baijiahao.baidu.com/s?id=1738870932846067472&wfr=spider&for=pc',
      linkTitle:'建设美好雁塔｜匠心独运！南飞鸿乐荟中心',
      start:'24',
      praise:'19',
      comment:'26',
    },    
    {
      name:'航天城芳华里',
      tag:'绿地集团',
      tag2:'潮酷运动街区',
      tag3:'丝路项目',
      starts:5,
      description:'芳华里商业体量3万㎡，共计五个楼层，预计规划品牌超100+。在我们与芳华里的前期沟通中发现，项目将突破性的舍弃掉原有的影城空间规划，打造西北首个购物中心内的潮酷运动街区，将原有的巨幕厅改造为具有星空梦幻效果的主题篮球馆。',
      time:'2022-11-18 14:13:07',
      src:'https://img2.baidu.com/it/u=2608669278,1339405446&fm=253&fmt=auto?w=1421&h=800',
      link:'https://new.qq.com/rain/a/20220610A0CWBM00',
      linkTitle:'航天城芳华里',
      start:'15',
      praise:'21',
      comment:'19'
    }       
  ]
  const livelihood =[
    {
      name:'西安市红会医院高铁新城院区',
      tag:'红会医院',
      tag2:'三级甲等医院',
      tag3:'3000张床位',
      starts:3,
      description:'西安市红会医院高铁新城院区项目总投资约58亿元，占地面积314亩，建设规模为3000张床位的三级甲等医院。其规模、床位、投资在西安市的医院中均首屈一指。',
      time:'2021-09-20 11:29:16',
      src:'https://img1.baidu.com/it/u=1838755985,2044542792&fm=253&fmt=auto&app=138&f=JPEG?w=1089&h=500',
      link:'http://ex.chinadaily.com.cn/exchange/partners/82/rss/channel/cn/columns/j3u3t6/stories/WS638c1109a3102ada8b2251ad.html',
      linkTitle:'西安市红会医院高铁新城院区',
      start:'50',
      praise:'31',
      comment:'24',
    },
    {
      name:'陕西省人民医院西咸院区',
      tag:'秦汉新城',
      tag2:'首个三甲医院',
      tag3:'1000张床位',
      starts:4,
      description:'西安欢乐谷是华侨城欢乐谷家族中总投资和单位投资一次性投入最高的主题公园。公园以“欢乐谷”、“欢乐谷·玛雅海滩”、“欢乐谷·HAPPY WALK”、“欢乐谷·KIDS”、“OCT1314摩天轮”等多个业态主题强势联动，为游人打造多维度娱乐体验新场景。',
      time:'2022-01-17 18:33:51',
      src:'https://img2.baidu.com/it/u=3797382096,2402343106&fm=253&fmt=auto&app=138&f=JPEG?w=864&h=486',
      link:'https://baijiahao.baidu.com/s?id=1742937284373312149&wfr=spider&for=pc',
      linkTitle:'西安市红会医院高铁新城院区',
      start:'24',
      praise:'21',
      comment:'21',
    },    
    {
      name:'西安市第一医院高新院区',
      tag:'第一医院高新院区',
      tag2:'三甲医院',
      tag3:'眼科及心血管科',
      starts:5,
      description:'中国国际丝路中心位于西咸新区中央商务区，占地894亩，总投资400亿元，主要建设国际会议中心、五星级酒店、服务式公寓、高端商业百货等多种业态，中国国际丝路中心中的中国国际丝路中心5A级写字楼高498米，建成后将成为西部地区第一高。',
      time:'2022-03-18 12:03:57',
      src:'https://img0.baidu.com/it/u=2618172226,3952293940&fm=253&fmt=auto&app=120&f=PNG?w=1002&h=500',
      link:'https://view.inews.qq.com/a/20221109A067X500',
      linkTitle:'西安市第一医院高新院区',
      start:'15',
      praise:'26',
      comment:'19'
    },
    {
      name:'西安交大一附院国际陆港医院',
      tag:'三级甲等医院',
      tag2:'一场两馆',
      tag3:'“大专科”医院',
      starts:5,
      description:'西安国际足球中心是2023年亚足联中国亚洲杯馆主场馆之一。经西安市政府决定，按照国际A级体育场馆建设标准，在西咸新区沣东新城规划建设西安国际足球中心，这座能容纳60000人，并符合亚足联标准的现代化专业足球场，于2023年亚洲杯举办前建成投用',
      time:'2022-02-08 15:35:25',
      src:'https://img1.baidu.com/it/u=492046234,2168446689&fm=253&fmt=auto&app=120&f=PNG?w=783&h=500',
      link:'https://m.fang.com/news/xian/12188_39554182.html?ivk_sa=1024320u',
      linkTitle:'交大一附院国际陆港医院',
      start:'24',
      praise:'27',
      comment:'27'
    },           
  ]
  const IconText = ({ icon, text }) => (
    <Space style={{marginLeft:20}}>
      {React.createElement(icon)}
      {text}
    </Space>
  );

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mode:'工程'
    };
  }

  componentDidMount() {
    window.scrollTo(0, 0);
  }

  handleModeChange = e => {
    const mode = e.target.value;
    this.setState({ mode });
  };

  jump = (link) =>{
    window.open(link);
  }

  render() {
    const { mode } = this.state;
    return (
      <>
        <div style={{marginLeft:0}}>
          <Breadcrumbs props={this.props}></Breadcrumbs>
        </div> 
        <Divider />   
        <div style={{margin:20}}>
          <div style={{width:'96%'}}>
            <div style={{marginTop:15,marginLeft:50, textAlign:'left'}}>
              {/* <Radio.Group onChange={this.handleModeChange} value={mode} style={{ marginBottom: 8 }}>
                <Radio.Button value="工程开发">工程开发</Radio.Button>
                <Radio.Button value="新晋商圈">新晋商圈</Radio.Button>
              </Radio.Group>
              <Divider />    */}
              <Tabs defaultActiveKey="1">
                <Tabs.TabPane tab="文旅项目" key="1">
                  <div>
                  {
                      projects && projects.map((item,index)=>{
                        return(
                          <div key={index} style={{width:'94%', margin:'17px auto', border:'1px solid #ccc', height:230, display:'flex',justifyContent:'flex-start'}}>
                            <div style={{margin:18,cursor:'pointer'}} onClick={()=>{this.jump(item.link)}}>
                              <Image
                                  width={200}
                                  height={193}
                                  alt={item.name}
                                  preview={false}
                                  src={item.src}
                                />
                            </div>
                            <div style={{marginLeft:20,marginTop:15,textAlign:'left',marginRight:10}}>
                              <p style={{fontSize:20,margin:'10px 0'}}>{item.name}</p>
                              <p>
                                <Paragraph>
                                  <Tag color="volcano">{item.tag}</Tag>
                                  <Tag color="orange">{item.tag2}</Tag>
                                  <Tag color="gold">{item.tag3}</Tag>
                                </Paragraph>
                              </p>
                              <p style={{height:32}}>描述: {item.description}</p>
                              <p>星级: <Rate disabled defaultValue={item.starts} /></p>
                              <p>相关链接: <Link onClick={()=>{this.jump(item.link)}}>{item.linkTitle}</Link></p>
                              <p>
                                <Paragraph>  
                                  评论:                          
                                  <IconText icon={StarOutlined} text={item.start}  key="list-vertical-star-o" />
                                  <IconText icon={LikeOutlined} text={item.praise} key="list-vertical-like-o" />
                                  <IconText icon={MessageOutlined} text={item.comment} key="list-vertical-message" />
                                </Paragraph>
                                </p>
                            </div>
                          </div>
                        )
                      })
                  }
                  </div>
                </Tabs.TabPane>
                <Tabs.TabPane tab="赛事文化" key="2">
                <div>
                  {
                      culture && culture.map((item,index)=>{
                        return(
                          <div key={index} style={{width:'94%', margin:'17px auto', border:'1px solid #ccc', height:200, display:'flex',justifyContent:'flex-start'}}>
                            <div style={{margin:18,cursor:'pointer'}} onClick={()=>{this.jump(item.link)}}>
                              <Image
                                  width={200}
                                  height={163}
                                  preview={false}
                                  src={item.src}
                                />
                            </div>
                            <div style={{marginLeft:20,marginTop:15,textAlign:'left',marginRight:10}}>
                              <p>
                                <Paragraph>
                                  <Tag color="volcano">{item.tag}</Tag>
                                  <Tag color="orange">{item.tag2}</Tag>
                                  <Tag color="gold">{item.tag3}</Tag>
                                </Paragraph>
                              </p>
                              <p style={{height:42}}>描述: {item.description}</p>
                              <p>星级: <Rate disabled defaultValue={item.starts} /></p>
                              <p>相关链接: <Link onClick={()=>{this.jump(item.link)}}>{item.linkTitle}</Link></p>
                              <p>
                                <Paragraph>  
                                  评论:                          
                                  <IconText icon={StarOutlined} text={item.start}  key="list-vertical-star-o" />
                                  <IconText icon={LikeOutlined} text={item.praise} key="list-vertical-like-o" />
                                  <IconText icon={MessageOutlined} text={item.comment} key="list-vertical-message" />
                                </Paragraph>
                                </p>
                            </div>
                          </div>
                        )
                      })
                  }
                  </div>
                </Tabs.TabPane>
                <Tabs.TabPane tab="重点商圈" key="3">
                <div>
                  {
                      business && business.map((item,index)=>{
                        return(
                          <div key={index} style={{width:'94%', margin:'17px auto', border:'1px solid #ccc', height:200, display:'flex',justifyContent:'flex-start'}}>
                            <div style={{margin:18,cursor:'pointer'}} onClick={()=>{this.jump(item.link)}}>
                              <Image
                                  width={200}
                                  height={163}
                                  preview={false}
                                  src={item.src}
                                />
                            </div>
                            <div style={{marginLeft:20,marginTop:15,textAlign:'left',marginRight:10}}>
                              <p>
                                <Paragraph>
                                  <Tag color="volcano">{item.tag}</Tag>
                                  <Tag color="orange">{item.tag2}</Tag>
                                  <Tag color="gold">{item.tag3}</Tag>
                                </Paragraph>
                              </p>
                              <p style={{height:42}}>描述: {item.description}</p>
                              <p>星级: <Rate disabled defaultValue={item.starts} /></p>
                              <p>相关链接: <Link onClick={()=>{this.jump(item.link)}}>{item.linkTitle}</Link></p>
                              <p>
                                <Paragraph>  
                                  评论:                          
                                  <IconText icon={StarOutlined} text={item.start}  key="list-vertical-star-o" />
                                  <IconText icon={LikeOutlined} text={item.praise} key="list-vertical-like-o" />
                                  <IconText icon={MessageOutlined} text={item.comment} key="list-vertical-message" />
                                </Paragraph>
                                </p>
                            </div>
                          </div>
                        )
                      })
                  }
                  </div>
                </Tabs.TabPane>
                <Tabs.TabPane tab="休闲娱乐" key="4" disabled></Tabs.TabPane>
                <Tabs.TabPane tab="民生基础" key="5">
                <div>
                  {
                      livelihood && livelihood.map((item,index)=>{
                        return(
                          <div key={index} style={{width:'94%', margin:'17px auto', border:'1px solid #ccc', height:200, display:'flex',justifyContent:'flex-start'}}>
                            <div style={{margin:18,cursor:'pointer'}} onClick={()=>{this.jump(item.link)}}>
                              <Image
                                  width={200}
                                  height={163}
                                  preview={false}
                                  src={item.src}
                                />
                            </div>
                            <div style={{marginLeft:20,marginTop:15,textAlign:'left',marginRight:10}}>
                              <p>
                                <Paragraph>
                                  <Tag color="volcano">{item.tag}</Tag>
                                  <Tag color="orange">{item.tag2}</Tag>
                                  <Tag color="gold">{item.tag3}</Tag>
                                </Paragraph>
                              </p>
                              <p style={{height:42}}>描述: {item.description}</p>
                              <p>星级: <Rate disabled defaultValue={item.starts} /></p>
                              <p>相关链接: <Link onClick={()=>{this.jump(item.link)}}>{item.linkTitle}</Link></p>
                              <p>
                                <Paragraph>  
                                  评论:                          
                                  <IconText icon={StarOutlined} text={item.start}  key="list-vertical-star-o" />
                                  <IconText icon={LikeOutlined} text={item.praise} key="list-vertical-like-o" />
                                  <IconText icon={MessageOutlined} text={item.comment} key="list-vertical-message" />
                                </Paragraph>
                                </p>
                            </div>
                          </div>
                        )
                      })
                  }
                  </div>
                </Tabs.TabPane>
              </Tabs>
            </div>

          </div>
        </div>
      </>  
    )
    }
}
